const ball = document.querySelector(".ball");

// 监听窗口的点击事件
window.addEventListener("click", (e) => {
  const x = e.clientX,
    y = e.clientY;
  // 创建一个div元素
  const pointer = document.createElement("div");
  // 给div元素添加class
  pointer.classList.add("pointer");
  // 设置div元素的left属性为鼠标点击位置的x坐标
  pointer.style.left = `${x}px`;
  // 设置div元素的top属性为鼠标点击位置的y坐标
  pointer.style.top = `${y}px`;
  // 将div元素添加到body中
  document.body.appendChild(pointer);
  // 监听div元素的动画结束事件
  pointer.addEventListener("animationend", () => {
    // 动画结束后，移除div元素
    pointer.remove();
  });
  move(x, y);
});

// 定义一个函数，用于移动球
function move(x, y) {
  // 获取球的位置信息
  const rect = ball.getBoundingClientRect();
  // 获取球的中心点坐标
  const ballX = rect.x + rect.width / 2;
  const ballY = rect.y + rect.height / 2;
  // 计算球与目标点之间的角度
  const rad = Math.atan2(y - ballY, x - ballX);
  // 将弧度转换为角度
  const deg = (rad * 180) / Math.PI;

  // 取消球的所有动画
  ball.getAnimations().forEach((animation) => {
    animation.cancel();
  });

  // 创建一个新的js动画
  // web animation api 优点：
  // 1. 避免第三方库的依赖，不额外增加大小；
  // 2. 不影响dom树，不会引起重绘和回流；不影响css树，不会引起重排；效率非常高；
  ball.animate(
    [
      // 第一个关键帧，球从当前位置旋转到目标角度
      { transform: `translate(${ballX}px,${ballY}px) rotate(${deg}deg)` },
      // 第二个关键帧，球在目标角度上放大
      {
        transform: `translate(${ballX}px,${ballY}px) rotate(${deg}deg) scaleX(1.5) `,
        offset: 0.4,
      },
      // 第三个关键帧，球从目标角度上放大移动到目标位置
      {
        transform: `translate(${x}px,${y}px) rotate(${deg}deg) scaleX(1.5)`,
        offset: 0.6,
      },
      // 第四个关键帧，球在目标位置上缩小
      {
        transform: `translate(${x}px,${y}px) rotate(${deg}deg) scaleX(1)`,
      },
    ],
    {
      // 动画持续时间为1秒
      duration: 1000,
      // 动画结束后保持最后一帧的状态
      fill: "forwards",
    }
  );
}

function init() {
  const x = window.innerWidth / 2;
  const y = window.innerHeight / 2;
  ball.style.transform = `translate(${x}px,${y}px)`;
}
init();
